<template>
  <div class="lg:grid-cols-4 max-lg:grid-cols-2 lg:gap-6 grid gap-3" v-if="show">
    <nuxt-link
      :prefetch="false"
      class="w-full lg:p-[2rem] p-4 bg-[#f7f7f7] hover:bg-[#f7f7f7]/50 duration-300 rounded-[1rem] flex justify-center items-center cursor-pointer"
      v-for="(i, k) in categories"
      :key="k"
      :to="localePath(`/game/platform/${i.id}`)"
    >
      <div class="lg:justify-center flex gap-1 items-center w-full">
        <div class="size-[2.125rem] flex-none rounded-[.5rem] overflow-hidden">
          <img
            v-lazy="$globalFn.imgPrefixUrl(i.pic_image)"
            :title="i.name + 'classification'"
            :alt="i.name + 'classification'"
            class="size-full object-cover"
           
          />
        </div>
        <h2 class="line-clamp-1 max-lg:w-full font-medium capitalize">
          {{ i.name }}
        </h2>
      </div>
    </nuxt-link>
  </div>
</template>
<script>
  export default {
    name: 'GameCategories',
    props: {
      categories: {
        type: Array,
        default: () => []
      },
      show: {
        type: Boolean,
        default: false
      }
    }
  }
</script>
